document.addEventListener('DOMContentLoaded', function() {
    const images = document.querySelectorAll('.gallery-main');
    images.forEach(img => {
        if(img.complete) {
            img.classList.add('loaded');
        } else {
            img.addEventListener('load', function() {
                this.classList.add('loaded');
            });
        }
    });
});


// 图片放大功能
document.addEventListener('DOMContentLoaded', function() {
    // 获取图片和模态框元素
    const image = document.querySelector('.gallery-main');
    const modal = document.createElement('div');
    modal.className = 'image-modal';
    modal.innerHTML = `
        <span class="close-modal">&times;</span>
        <div class="modal-content">
            <img class="modal-image" src="${image.src}" alt="${image.alt}">
        </div>
    `;
    document.body.appendChild(modal);

    // 点击图片打开模态框
    image.addEventListener('click', function() {
        modal.style.display = 'block';
        document.body.style.overflow = 'hidden'; // 防止页面滚动
    });

    // 点击关闭按钮关闭模态框
    modal.querySelector('.close-modal').addEventListener('click', function() {
        modal.style.display = 'none';
        document.body.style.overflow = 'auto'; // 恢复页面滚动
    });

    // 点击模态框背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });

    // 按ESC键关闭模态框
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape' && modal.style.display === 'block') {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    });
});